<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 330px;
				height: 500px;
				border: 1px solid lightgray;
				border-radius: 10px;
				margin: 20px;
				padding: 20px;
				position: relative;
			}
			.cheatfix:after{
				content: '';
				display: block;
				clear: both;
			}
			.shop{
				color: red;
				font-weight: 700;
				padding-left: 20px;
				padding-right: 30px;
			}
			.main1{
				font-weight: 700;
				margin-bottom: 10px;
				position: relative;
			}
			.image1{
				position: absolute;
				top: 5px;
				right: 10px;
			}
			.image2{
				position: absolute;
				left:110px;
				top: 40px;
			}
			.main2,.main3,.main4,.main5{
				/* border: 1px solid red; */
				width: 320px;
				margin-bottom: 20px;
			}
			.left{
				width: 120px;
				height: 100px;
				float: left;
				/* border: 1px solid green; */
			}
			.right{
				width: 160px;
				height: 100px;
				margin-left: 170px;
				/* border: 2px solid black; */
			}
			.p1{
				margin-bottom: 10px;
				
			}
			.p1 a{
				color: coral;
			}
			.p2{
				margin-bottom: 5px;
			}
			p{
				color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="main1"><span class="shop">SHOP</span>今日推荐 <img src="img/more.gif" alt="" class="image1"/></div>
			<img src="img/shen.png" alt="" class="image2"/>
			<div class="main2 clearfix">
				<div class="left"><img src="img/img9.gif" width="100%" height="100%"/></div>
				
				<div class="right">
					<p class="p1"><a href="#">汉来国际美食百货</a></p>
					<p class="p2">口味：创意中餐</p>
					<p class="p3">区域：朝阳/CBD</p>
				</div>
			</div>
			<div class="main3 clearfix">
				<div class="left"><img src="img/img7.gif" width="100%" height="100%"/></div>
				<div class="right">
					<p class="p1"><a href="#">汉来国际美食百货</a></p>
					<p class="p2">口味：创意中餐</p>
					<p class="p3">区域：朝阳/CBD</p>
				</div>
			</div>
			<div class="main4 clearfix">
				<div class="left"><img src="img/img8.gif" width="100%" height="100%"/></div>
				<div class="right">
					<p class="p1"><a href="#">汉来国际美食百货</a></p>
					<p class="p2">口味：创意中餐</p>
					<p class="p3">区域：朝阳/CBD</p>
				</div>
			</div>
			<div class="main5 clearfix">
				<div class="left"><img src="img/img7.gif" width="100%" height="100%"/></div>
				<div class="right">
					<p class="p1"><a href="#">汉来国际美食百货</a></p>
					<p class="p2">口味：创意中餐</p>
					<p class="p3">区域：朝阳/CBD</p>
				</div>
			</div>
		</div>
	</body>
</html>
